<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>关注成长</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/element-ui-index.css"/>
    <script type="text/javascript" src="js/element-ui-index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="app" style="width: 100%;">
<template style="width: 100%;">

    <div style="padding: 20px;color: rgb(0 0 0);text-decoration: none;font-size: smaller;text-align: right;">
        <el-button style="color:#3a8ee6;" icon="el-icon-s-management" circle size="mini" @click="gotoMgrPage()" v-if="is_admin==1"></el-button>
        <el-button style="color:#3a8ee6;" icon="el-icon-refresh" circle size="mini" @click="getRecords()"></el-button>
    </div>

    <div style="text-align: center;font-size: medium;color: #000000;padding: 10px 0px 32px 0px;">已登记数据</div>

    <el-table :data="records" :show-header="false" style="width: 92%;margin: auto;" v-loading="loading">
        <el-table-column label="名称">
            <template slot-scope="scope">
                <el-link type="primary" @click="redirectMain(scope.row)" size="small">{{scope.row.name}}</el-link>
                <div style="font-size: smaller;color: #a9534b;">登记人数 {{scope.row.members}} 人</div>
            </template>
        </el-table-column>
        <el-table-column label=" " width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="modifyRecord(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteRecord(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="padding: 16px;"></div>


    <!-- 登记新数据 -->
    <div class="fill-form" style="margin: 36px;">
        <div style="text-align: center;margin: 24px;font-size: x-middle;">登记新考试成绩</div>
        <!-- 登录表单 -->
        <el-form :model="fillForm" :rules="fillFormRules" ref="fillFormRef">
            <el-form-item prop="formClassCode" style="margin-bottom:28px;">
                <div style="float: left;width: 25%;font-size:12px;">考试登记码</div>
                <el-input v-model="fillForm.formClassCode" maxlength="6" style="font-size:13px;width: 75%;float: right;"></el-input>
            </el-form-item>
            <el-row>
                <el-col>
                    <el-button type="primary" :loading="loadingBtn" @click="submitExaminationCode" class="el-col-24">
                        <div v-if="!loadingBtn">登记</div>
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>
</div>
</body>

<script type="text/javascript">
new Vue({
    el: '#app',
    data() {
        return {
            token: "",
            is_admin: 0,
            loading: false,
            records: [],

            loadingBtn: false,
            //表单对象
            fillForm: {
                formClassCode: ""
            },
            //表单验证规则
            fillFormRules: {
                //数据登记码的校验规则
                formClassCode: [
                    { required: true, message: "请输入6位考试登记码", trigger: "blur" },
                    { min: 6, max: 6, message: "请输入6位考试登记码", trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.token = sessionStorage.getItem("token");
        if (!this.token) {
            top.location.href = "login.html";
            return;
        }
        this.is_admin = sessionStorage.getItem("is_admin");
        console.log(this.is_admin);
    },
    mounted() {
        this.getRecords();
    },
    methods: {
        async getRecords() {
            var params = {};
            params.token = this.token;
            this.loading = true;
            //查询已登记数据
            let _this = this;
            axios.post("/api/examinationRecords", params)
                .then(function (res) {
                if (res.data.rcode == 0) {
                    _this.loading = false;
                    _this.records = res.data.body;
                    return;
                } else {
                    _this.loading = false;
                    return _this.$message.error("系统异常");
                }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常");
                });
        },
        redirectMain(row) {
            sessionStorage.setItem("exam_id", row.eid); //要查看详情的考试id
            sessionStorage.setItem("exam_name", row.name);
            window.location.href = "main.html";
            return;
        },
        modifyRecord(row) {
            sessionStorage.setItem("exam_id", row.eid); //修改考试成绩
            sessionStorage.setItem("exam_name", row.name);
            window.location.href = "fillin.html";
            return;
        },
        deleteRecord(row) {
            this.$confirm('确认要删除此次考试登记的成绩吗？', '提示', {
                confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
            }).then(() => {
                var params = {};
                params.token = this.token;
                params.exam_id = row.eid;
                let _this = this;
                axios.post("/api/deleteExaminationResults", params)
                    .then(function (res) {
                        if (res.data.rcode == 0) {
                            _this.$message({ type: 'success', message: '删除成功!' });
                            //刷新页面列表
                            _this.getRecords();
                        } else {
                            return _this.$message.error("系统异常");
                        }
                    })
                    .catch(function (error) {
                        return _this.$message.error("系统异常");
                    });
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消删除' });
            });
        },
        async submitExaminationCode() {
            this.$refs.fillFormRef.validate(async valid => {
                if (!valid) return this.$message.error("请输入有效的考试登记码");
                var params = {};
                params.token = this.token;
                params.examinationCode = this.fillForm.formClassCode;
                this.loadingBtn = true;
                //提交验证数据登记码
                let _this = this;
                axios.post("/api/verifyExaminationCode", params)
                  .then(function (res) {
                    if (res.data.rcode == 0) {
                        _this.loadingBtn = false;
                        sessionStorage.setItem("exam_id", res.data.body.exam_id); //要查看详情的考试id
                        sessionStorage.setItem("exam_name", res.data.body.exam_name);
                        window.location.href = "fillin.html";
                        return;
                    } else {
                        _this.loadingBtn = false;
                        return _this.$message.error("考试登记码错误");
                    }
                  })
                  .catch(function (error) {
                      _this.loadingBtn = false;
                      return _this.$message.error("系统异常");
                  });
            })
        },
        gotoMgrPage() {
            window.location.href = "mgr.html";
            return;
        }
    }
})
</script>

</html>
